﻿<!DOCTYPE html>
<html lang="en">

<head>
    <base href="/portal">
    <meta charset="utf-8" />
    <link rel="apple-touch-icon" sizes="76x76" href="~/lib/now-ui-kit-pro-v1.2.2/mix-app/assets/img/apple-icon.png">
    <link rel="icon" href="@(MixService.GetConfig<string>("Favicon") ?? "/mix-app/css/portal/img/mixcore-logo-green-16x16.png")">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>@ViewData["Title"] - Mixcore</title>
    <meta content='width=device-width, initial-sca
          le=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <environment names="Development,Staging,Production">

         <!-- 
            body {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                align-items: center;
                background-color: #000;
                height: 100%;
            }

                body::before {
                    content: "";
                    background: black;
                    opacity: 0.8;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    position: fixed;
                    z-index: -1;
                    background-image: url("/mix-app/img/background.jpg");
                    background-repeat: no-repeat;
                    background-position: right top;
                    background-attachment: fixed;
                    background-size: cover;
                }

                body::after {
                    content: "";
                    background: black;
                    opacity: 0.5;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    position: fixed;
                    z-index: -1;
                    background-image: url("/mix-app/img/background.jpg");
                    background-repeat: no-repeat;
                    background-position: right top;
                    background-attachment: fixed;
                    background-size: cover;
                    /* Add the blur effect */
                    filter: blur(8px);
                    -webkit-filter: blur(8px);
                }

            .form-init {
                width: 100%;
                max-width: 530px;
                padding: 15px;
                margin: auto;
            }-->
        <style>


            body {
                display: grid;
                background-color: #000;
                height: 100%;
            }

                body::before {
                    content: "";
                    background: black;
                    opacity: 0.8;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    position: fixed;
                    z-index: -1;
                    background-image: url("/mix-app/img/background.jpg");
                    background-repeat: no-repeat;
                    background-position: right top;
                    background-attachment: fixed;
                    background-size: cover;
                }

                body::after {
                    content: "";
                    background: black;
                    opacity: 0.5;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    position: fixed;
                    z-index: -1;
                    /* background-image: url("/mix-app/img/background.jpg"); */
                    background-repeat: no-repeat;
                    background-position: right top;
                    background-attachment: fixed;
                    background-size: cover;
                    /* Add the blur effect */
                    filter: blur(8px);
                    -webkit-filter: blur(8px);
                }
                hr{
                    border: none !important;
                }
                .container {
                        grid-template-columns: 40px 50px auto 50px 40px;
                        grid-template-rows: 25% 100px auto;
                    }
                .form-init {
                    width: 100%;
                    max-width: 530px;
                    padding: 15px;
                    margin: auto;
                }
        </style>
    </environment>

    <link href="~/mix-app/css/app-vendor.min.css" rel="stylesheet" />
    <link href="~/mix-app/css/shared.min.css" rel="stylesheet" />
    <link href="~/mix-app/css/app-init.min.css" rel="stylesheet" />
    <script src="~/mix-app/js/particles/particles.min.js"></script>
</head>
<body class="" ng-app="MixPortal">
    <style>
        :root
        {
            --primary-color-hue : {{globalSettings.portalThemeSettings.primaryColorHue}};
            --primary-color-saturation : {{globalSettings.portalThemeSettings.primaryColorSaturation}}%;
            --primary-color-brightness : {{globalSettings.portalThemeSettings.primaryColorBrightness}}%;
            --bg-color: {{globalSettings.portalThemeSettings.bgColor}};
            --text-color: {{globalSettings.portalThemeSettings.textColor}};
        }
    </style>
    <div id="particles-js" class="position-fixed w-100 h-100"></div>
    <mix-loader ng-show="isBusy"></mix-loader>
    <div class="progress" style="height: 2px;">
        <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <div class="container">
        <div class="card form-init">
            <div class="p-5">
                <img src="/mix-app/css/portal/img/mixcore-logo-green.svg" alt="Mixcore CMS" height="35">
                @try
                {
                        <p>@Environment.GetEnvironmentVariable("MYSQLCONNSTR_localdb")</p>
                }
                catch (Exception ex)
                { 
                        @ex.Message
                }
                @RenderBody()
            </div>
        </div>
    </div>

    <environment names="Development">
    </environment>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>  
    <script src="~/mix-app/js/framework.min.js"></script>
    <script src="~/mix-app/js/app-portal-required.min.js"></script>
    <script src="~/mix-app/js/portal.min.js"></script>
    <script src="~/mix-app/js/app-init.min.js"></script>
    <script src="~/mix-app/js/app-shared.min.js"></script>

    @RenderSection("Scripts", required: false)

    <!-- Modal -->
    <div class="modal fade" id="termAndCondition" tabindex="-1" role="dialog" aria-labelledby="termAndConditionTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="termAndConditionTitle">Terms and Conditions.</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">


                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">I have read and understand!</button>
                </div>
            </div>
        </div>
    </div>

    <script> particlesJS('particles-js', { "particles": { "number": { "value": 50, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image": { "src": "img/background.jpg", "width": 100, "height": 100 } }, "opacity": { "value": 0.2, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 3, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.2, "width": 1 }, "move": { "enable": true, "speed": 3, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "window", "events": { "onhover": { "enable": true, "mode": "grab" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 200, "line_linked": { "opacity": 0.2 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true }); </script>
</body>
</html>